<template>
  <div class="container gray">
    <!-- 头部 -->
    <div class="header">
      <span class="iconfont back_icon" @click="back">&#xe616;</span>
      <h3>新增地址</h3>
    </div>
    <!-- 填写地址区域 -->
    <div class="main">
      <el-form ref="newAddFormRef" :model="newAddForm" :rules="newAddFormRules" label-width="3.2rem" :label-position="'left'">
        <!-- 收货人 -->
        <el-form-item label="收货人" prop="cgn_name">
          <el-input v-model="newAddForm.cgn_name" placeholder="请填写收货人的姓名"></el-input>
        </el-form-item>
        <!-- 手机号码 -->
        <el-form-item label="手机号码" prop="cgn_tel">
          <el-input v-model="newAddForm.cgn_tel" placeholder="请填写收货人手机号"></el-input>
        </el-form-item>
        <!-- 收货地址 -->
        <el-form-item label="收货地址" prop="cgn_address">
          <el-input v-model="newAddForm.cgn_address" placeholder="请填写收货地址"></el-input>
        </el-form-item>
      </el-form>
      <el-form>
        <!-- 保存按钮 -->
        <el-form-item>
          <el-button class="btn" @click="submitForm">保存收货地址</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  name: 'AddNewAddress',
  data () {
    // 验证手机号码规则
    var checkPhone = (rule, value, callback) => {
      const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
      if (reg.test(value)) {
        callback()
      } else {
        return callback(new Error('请输入正确的手机号'))
      }
    }
    return {
      // 新增地址表单的数据绑定对象
      newAddForm: {
        user_id: JSON.parse(sessionStorage.getItem('user')).user_id,
        cgn_name: '',
        cgn_tel: '',
        cgn_address: ''
      },
      // 表单的验证规则对象
      newAddFormRules: {
        cgn_name: [
          { required: true, message: '请输入收货人名称', trigger: 'blur' }
        ],
        cgn_tel: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: checkPhone, trigger: 'blur' }
        ],
        cgn_address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 返回上一页
    back () {
      this.$router.go(-1)
    },
    async submitForm () {
      this.$refs.newAddFormRef.validate(async valid => {
        if (valid) {
          // Qs.stringify()将对象序列化成URL的形式，Qs是axios里面自带的
          const str = qs.stringify(this.newAddForm)
          // 添加地址
          const { data: res } = await this.$http.post('/api/user/addaddress', str, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          if (res.meta.status !== 200) {
            return this.$message.error(res.meta.msg)
          } else {
            // 获取地址
            const { data: res1 } = await this.$http.get(`/api/user/getaddress/${this.newAddForm.user_id}`)
            if (res1.meta.status !== 200) return
            sessionStorage.setItem('address', JSON.stringify(res1.data[0]))
            this.$store.commit('initAddress', res1.data[0])
            this.$router.go(-1)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  overflow: hidden;
  width: 15rem;
  height: 100%;
  overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
}
// 头部
.header {
  position: relative;
  width: 100%;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: .72rem;
  text-align: center;
  background: #fff;
  .back_icon {
    position: absolute;
    left: .4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .8rem;
  }
}
// 填写地址表单
.main {
  background: #fff;
  padding: .4rem;
  margin-top: .4rem;
}
.el-button {
  width: 100%;
  font-size: .56rem!important;
  color: #fff!important;
  border: 0!important;
  background: #d4237a!important;
}
</style>
